<template>
    <el-table v-loading="loading" :data="data" :height="tableHeight" :style="tableStyle" v-bind="$attrs"
        @selection-change="handleSelectionChange" @sort-change="handleSortChange">
        <slot></slot>
    </el-table>
</template>

<script setup>
import { onUnmounted } from 'vue'
import { useTableHeight } from '@/utils/tableHeightMixin.js'

const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    data: {
        type: Array,
        default: () => []
    },
    offset: {
        type: Number,
        default: 280
    },
    containerSelector: {
        type: String,
        default: '.el-card'
    },
    tableStyle: {
        type: Object,
        default: () => ({ width: '100%' })
    }
})

const emit = defineEmits(['selection-change', 'sort-change'])

const { tableHeight, mountTableHeight, unmountTableHeight } = useTableHeight(props.offset, props.containerSelector)

const handleSelectionChange = (selection) => {
    emit('selection-change', selection)
}

const handleSortChange = (sortInfo) => {
    emit('sort-change', sortInfo)
}

mountTableHeight()

// 组件卸载时清理事件监听器
onUnmounted(() => {
    unmountTableHeight()
})
</script>